import { Button } from 'antd-mobile';
import React, { useCallback, useEffect, useState } from 'react';
/*
  学习目标：useCallback
  作用：对函数的声明进行缓存
  语法： useCallback((形参) => 函数， [])
  注意：💥 依赖项是空数组[]。会产生闭包效果，count永远是初始值
  解决办法：
    2. 👍通过形参避免产生闭包
    1. 👎使用依赖项， 破坏了缓存函数声明的效果
*/

export default function Father() {
  const [count, setCount] = useState(0);

  // 声明回调函数
  const addFn = useCallback((_count) => {
    setCount(_count + 1);
  }, []);

  // const addFn = useCallback(() => {
  //   setCount(count + 1);
  // }, [count]);
  return (
    <div>
      <h1>count: {count} </h1>

      <Count add={addFn} count={count}></Count>
    </div>
  );
}

function Count({ add, count }: any) {
  useEffect(() => {
    console.log('add被更新了  ----->  ');
  }, [add]);

  return (
    <div>
      <Button color="primary" onClick={() => add(count)}>
        点我修改count
      </Button>
    </div>
  );
}
